<template>
	<!-- 手机图片打印和生活照打印共用同一个页面-->
	<view class="left-box">
		<!--  #ifdef  MP-WEIXIN -->
		<!-- <view class="" style=" margin: 0rpx 18rpx; height: 350rpx;margin-bottom: 46rpx;" @click="storgImg">
			<image src="../static/add1@2x.png"></image>
		</view> -->
		<view  style=" margin: 0rpx 18rpx; height: 350rpx;margin-bottom: 46rpx;"
			@click="storgImg">
			<image src="../static/add1@2x.png"></image>
		</view>
		<!--  #endif -->
		<!--  #ifdef  MP-QQ -->
		<button class="" open-type="getUserInfo" style=" margin: 0rpx 18rpx; height: 350rpx;margin-bottom: 46rpx;"
			@click="storgImg">
			<image src="../static/add1@2x.png"></image>
		</button>
		<!--  #endif -->
		<scroll-view scroll-y="true" style="height: 658rpx;">
			<view class="flex" style="flex-wrap: wrap;">
				<block v-for="(item,index) in wxImg" :key="index">
					<view class="left-img" @click="previe(index)" style="position: relative;">
						<image :src="item"></image>
						<image src="../static/canels@2x.png" style="position: absolute; width:32rpx;height: 32rpx ;"
							@click.stop="deleleft(index)">
						</image>
					</view>
				</block>
			</view>
		</scroll-view>
		<x-print-prompt :long="long" success="true" @submitImg="submitImg"></x-print-prompt>
		<!--上传成功后的弹窗 -->
		<x-u-popu :lengthchange="lengthchange" :lengtherror="lengtherror" v-if="show">
			<template slot="content">
				{{titlesshow}}
			</template>
			<template slot="contentItem">
				{{titleItem}}
			</template>
		</x-u-popu>
	</view>
</template>
<script>
	import {
		login
	} from "@/utils/facility/login.js"
	// 图片文件上传服务器 
	// 上传完毕之后调用这个接口这个已经上传完毕
	// 获取本地图 
	// 判断是否登录权限 登陆后吧获取的unicodeid在文件上传的时候发给后端
	import {
		choosImgend,
		choosImg, // 
	} from '@/api/facility/chooseImgPrint.js'
	import {
		choss,
		easyImg
	} from '@/utils/facility/chooseImgPrint.js'
	export default {

		data() {
			return {
				wxImg: [],
				disabled: true, //提交按钮的防抖节流
				imgdisable: true, //选择照片的防抖 
				show: false, //控制上传成功后的弹窗的
				long: 0,
				titlesshow: '', //上传成功失败的提示
				titleItem: '', //上传成功失败的之后的下一步操作
				lengthchange: 0, //上传成功的次数
				lengtherror: 0, //上传失败的次数
				orderId: '', //订单id
				urlq: '', //传输的完整的二维码链接
				specId: '', //证件照规格id 
				ifIndex: '', // if判断是否全部for循环完毕 
				openid: '', //本地存储  openid=unionId
			}
		},
		onLoad(options) {
			// if (options.q) {
			// 	var scan_url = decodeURIComponent(options.q); //获取的完整的二维码url路径 
				var scan_url = "https://api.cloudmis.cn?id='6'&orderId=91D7A6FA1E3E4ADB921200E1FDA376A5&specid=0"
				// var url = "https://api.cloudmis.cn?id='1'&orderId=weoifhwufw&specId=50";
				// var reg =
				// 	/[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i; //正则匹配最后的动态参数
				var reg =
					/[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i;
				var arr = scan_url.match(reg);
				this.orderId = arr[6]
				// this.urlq = options.q
				this.specId = arr[8]
			// }

		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
		},
		methods: {
			// 点击本地获取图片
			storgImg() {
				if (this.openid == '') {
					login().then(res => {
						this.chosss();
					})
				} else {
					this.chosss();
				}
			},
			chosss() {
				if (this.wxImg.length == 6) {
					uni.showToast({
						title: '只能添加6张图',
						icon: 'none',
						duration: 1500
					})
				} else {
					if (this.imgdisable) {
						this.imgdisable = false; //选择照片的防抖
						choss(6).then(res => {
							console.log(res, 'res1')
							for (let i = 0; i < res.length; i++) {
								if (this.wxImg.length < 6) {
									this.wxImg.push(res[i])
								}
							}
							this.imgdisable = true; //选择照片的防抖
							this.long = this.wxImg.length;
						}).catch(error => {
							this.imgdisable = true; //选择照片的防抖
						})
					}
				}
			},
			// 提交打印
			submitImg() {
				// disabled: true, //提交按钮的防抖节流
				if (this.disabled && this.wxImg.length != 0) {
					uni.showLoading({
						title: `正在上传...`
					})
					// 只要点击了提交这个时候的上传图片和提交按钮都不可以再次选择
					this.disabled = false;
					this.imgdisable = false;
					for (let i = 0; i < this.wxImg.length; i++) {
						// this.unionId = this.openid;
						choosImg({
							postdata: [{
								fileId: 'orderId',
								value: this.orderId
							}, {
								fileId: 'unionId',
								value: this.openid
							}, {
								fileId: 'specId',
								value: '0' //this.specId
							}, {
								fileId: 'index',
								value: '1' //String(i + 1)
							}, {
								fileId: 'count',
								value: '2' //String(tempFilePathswxImg.length)
							}],
							filePath: this.wxImg[i],
						}).then(res => {
							if (res.success == true) {
								uni.hideLoading()
								this.lengthchange++;
								this.ifIndex++;
								uni.showLoading({
									title: `已上传${this.ifIndex}张`
								})
								if (this.ifIndex == this.wxImg.length) {
									choosImgend([{
										fileId: 'orderId',
										value: this.orderId
									}, {
										fileId: 'unionId',
										value: this.openid
									}]).then(res => {
										this.changeerr()
									}).catch(error => {

									})

								}
							} else if (res.success == false) {
								this.lengtherror++;
								this.ifIndex++;
								if (this.ifIndex == this.wxImg.length) { //全部上传完毕提示上传的错误   
									choosImgend([{
										fileId: 'orderId',
										value: this.orderId
									}, {
										fileId: 'unionId',
										value: this.openid
									}]).then(res => {
										this.changeerr()
									}).catch(error => {

									})

								}
							}
						}).catch(error => {
							this.trycatch("上传失败服务器异常", "请点击确定后退出重试")
						})
					}
				}
			},
			// 上传服务器异常
			trycatch(name1, name2) {
				uni.hideLoading()
				this.titlesshow = name1
				this.titleItem = name2
				this.show = true
			},
			// 上传提示:
			changeerr() {
				this.titlesshow = `上传成功${this.lengthchange}张，失败${this.lengtherror}张`;
				this.titleItem = '请点击确定后操作打印设备打印';
				this.show = true //上传成功之后显示弹窗 
				uni.hideLoading();
				this.disabled = false; //提交按钮的防抖节流
				this.imgdisable = false; //上传图片按钮的防抖节流
				this.wxImg = []; //上传成功之后清空图片
				this.long = 0;
			},
			// 删除图片 还未提交的时候可以删除 提交点击后发送到服务器过程不可以删除
			deleleft(index) {
				if (this.disabled) {
					uni.showModal({
						title: '删除提示',
						content: '请谨慎删除',
						success: (res) => {
							if (res.confirm) {
								console.log(index)
								this.wxImg.splice(index, 1)
								this.long -= 1;
								uni.showToast({
									icon: 'none',
									title: '删除成功'
								})
							} else if (res.cancel) {
								uni.showToast({
									icon: 'none',
									title: '取消删除'
								})
							}
						}
					})
				}
			},
			 
			previe(index) {
				// 预览图片 还未提交的时候可以删除 提交点击后发送到服务器过程不可以删除
				if (this.disabled) {
					easyImg(this.wxImg, index)
				}
			},
		}
	}
</script>

<style>
	.left-box {
		/* //30rpx */
		padding: 10rpx 10rpx 0rpx 10rpx;
	}

	.left-img {
		width: 219rpx;
		height: 237rpx;
		/* border: 0.1px solid red; */
		margin: 0rpx 13rpx 40rpx 13rpx;
		padding: 0rpx 17rpx 0rpx 17rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		/* box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5); */
		box-shadow: 0px 0px 8px 0px rgba(145, 122, 128, 0.5);
		border-radius: 5px;
	}

	.left-sub {
		padding: 0rpx;
		/* box-shadow: 0px 0px 8px 0px rgba(145, 122, 128, 0.5); */
	}
</style>
